/** * @description: 五困生-学院信息维度 */
<template>
  <div class="pub-container fivehard">
    <!-- 五困生占比 -->
    <PieEchart2
      v-if="isApiComp"
      pieShowId="percentFiveHard"
      :optionData="percentFiveHardData"
      :colorList="percentColorList"
      pieTitleText="学校总人数"
      titleText="五困生占比"
    />

    <!-- 困难生类型比例 -->
    <PieEchart
      v-if="isApiComp"
      pieShowId="typeFiveHard"
      :optionData="typeFiveHardData"
      :colorList="typeColorList"
      :lengendPlace="typeLengendPlace"
      pieTitleText="总人次"
      titleText="困难生类型比例"
    />

    <!-- 五困生年级占比 -->
    <PieEchart
      v-if="isApiComp"
      pieShowId="gradeFiveHard"
      :optionData="gradeFiveHardData"
      :colorList="gradeColorList"
      :lengendPlace="gradeLengendPlace"
      pieTitleText="总人次"
      titleText="五困生年级占比"
    />

    <!-- 各维度统计 -->
    <SchoolDmCount
      ref="SchoolDmCount"
      dimensionText="各年级五困生数据"
      :difficultStudentSubList="allFiveHardObj.difficultStudentSubList"
      @skipDetail="dimensionSkipDetail"
    />
  </div>
</template>

<script>
import SchoolDmCount from './components/schoolDmCount' //各维度统计
import PieEchart from '@/components/pieEchart'
import PieEchart2 from '@/components/pieEchart2'
import { difficultStuCollege } from '@/api/fiveHard'
export default {
  name: 'FiveHard',
  components: {
    SchoolDmCount,
    PieEchart,
    PieEchart2,
  },
  data() {
    return {
      allFiveHardObj: {}, //五困生数据-学院维度

      //五困生占比
      percentColorList: ['#2181FB', '#2CCDA8'],
      percentFiveHardData: [
        {
          name: '非困难学生',
          value: 0,
        },
        {
          name: '五困生',
          value: 0,
        },
      ],

      //困难生类型比例
      typeColorList: ['#2E6CF6', '#21A6FB', '#24E3FF', '#FFE032', '#FFA132', '#FF7357', '#BA4DF9', '#734DF9', '#07c160', '#ff976a'],
      typeLengendPlace: { top: '18%', left: '68%' },
      typeFiveHardData: [],

      // 五困生年级占比
      gradeColorList: ['#FF7357', '#FFE032', '#24E3FF', '#21A6FB', '#2E6CF6'],
      gradeFiveHardData: [],
      gradeLengendPlace: { top: '18%', left: '68%' },

      isApiComp: false,

      params: {
        //筛选条件
        collegeId: '',
        startDate: undefined,
        endDate: undefined,
        sign: undefined, //五困生类型
      },
    }
  },
  created() {
    this.params.collegeId = this.$route.query.subId
    this.getDifficultStuCollege()

    //筛选触发
    this.$bus.on('fiveHardDbs', (startDate, endDate, sign) => {
      this.params.startDate = startDate
      this.params.endDate = endDate
      this.params.sign = sign

      this.allFiveHardObj = {}
      this.typeFiveHardData = []
      this.collegeFiveHardData = []

      this.getDifficultStuCollege()
    })
  },
  methods: {
    // 获取全校五困生数据-学院维度
    async getDifficultStuCollege() {
      try {
        const { data } = await difficultStuCollege({ ...this.params })
        this.allFiveHardObj = data.data

        //五困生占比
        this.percentFiveHardData[0].value = data.data.unDifficultStuNums || 0
        this.percentFiveHardData[1].value = data.data.difficultStuNums || 0

        //困难生类型比例
        let typeFiveHardData = [
          { name: '经济', value: this.allFiveHardObj.economicDifficultStuNums || 0 },
          { name: '学业', value: this.allFiveHardObj.academicDifficultStuNums || 0 },
          { name: '心理', value: this.allFiveHardObj.mentalDifficultStuNums || 0 },
          { name: '行为', value: this.allFiveHardObj.behavioralDifficultStuNums || 0 },
          { name: '思想', value: this.allFiveHardObj.thoughtDifficultStuNums || 0 },
        ]
        this.typeFiveHardData = typeFiveHardData

        //年级统计
        let gradeFiveHardData = []
        this.allFiveHardObj.difficultStudentSubList.forEach(item => {
          gradeFiveHardData.push({
            name: item.subName || '--',
            value: item.difficultStuNums || 0,
          })
        })
        this.gradeFiveHardData = gradeFiveHardData

        this.isApiComp = true
      } catch (e) {
        console.log(e)
      }
    },

    //维度点击跳转
    dimensionSkipDetail(item, str) {
      //跳往某一个年级
      this.$router.push({
        path: '/gradeMsg',
        query: { collegeId: this.$route.query.subId, subId: item.subId, tc: item.subName + '级' + this.$route.meta.title },
      })
    },
  },
}
</script>

<style lang="scss" scoped></style>
